<template>
    <div>
        <div class="topnav-banner">
            <Topnav />
            <div class="banner">
                <h1>轱辘UI</h1>
                <h2>一个厉害的 UI 框架</h2>
                <p class="actions">
                    <a href="https://gitee.com">Gitee</a>
                    <router-link to="/doc">开始</router-link>
                </p>
            </div>
        </div>
        <div class="features">
            <ul>
                <li>
                    <svg class="icon">
                        <use xlink:href="#icon-vue"></use>
                    </svg>
                    <h3>基于Vue 3</h3>
                    <p>骄傲地使用了 Vue 3 Composition API</p>
                </li>
                <li>
                    <svg class="icon">
                        <use xlink:href="#icon-ts"></use>
                    </svg>
                    <h3>基于 TypeScript</h3>
                    <p>源代码采用 TypeScript 书写（非严格检查）</p>
                </li>
                <li>
                     <svg class="icon">
                        <use xlink:href="#icon-light"></use>
                    </svg>
                    <h3>代码易读</h3>
                    <p>每个组件的源代码都极其简洁</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">

    import Topnav from '../components/Topnav.vue';

    export default {
        components: { Topnav }
    }

</script>

<style lang="scss" scoped>

    $green: #02bcd0;
    $color: #007974;
    $border-radius: 4px;

    .topnav-banner {
        background: linear-gradient(145deg, rgba(227, 255, 253, 1) 0%, rgba(183, 233, 230, 1) 100%);
        clip-path: ellipse(80% 60% at 50% 40%);   // 实现圆弧形状
        
        .banner {
            color: $color;
            display: flex;
            justify-content: conter;
            align-items: center;
            flex-direction: column;
            padding: 100px 0;

            > .actions {
                padding: 8px 0;

                a {
                    display: inline-block;
                    margin: 0 8px;
                    padding: 8px 24px;
                    color: #FFF;
                    border-radius: $border-radius;
                    background: $green;

                    &:hover {
                        text-decoration: none;
                    }
                }
            }
        }
    }

    .features {
        margin: 64px auto;
        padding: 0 16px;

        @media (min-width: 800px) {
            width: 800px;
        }

        @media (min-width: 1200px) {
            width: 1200px;
        }

        > ul {
            display: flex;
            flex-wrap: wrap;

            > li {
                margin: 16px 24px 16px 0;
                display: grid;
                justify-content: start;
                align-content: space-between;
                grid-template-areas: 
                "icon title"
                "icon text";
                grid-template-columns: 80px auto;
                grid-template-rows: 1fr auto;

                > svg {
                    grid-area: icon;
                    width: 64px;
                    height: 64px;
                }

                > h3 {
                    grid-area: title;
                    font-size: 28px;
                }

                > p {
                    grid-area: text;
                }
            }
        }
    }
    
</style>